<template>
	<view class="content">
		<view class="c2c">
			<view class="top">法币交易属于C2C交易，资金不经过平台，平台不会自动扣款，需要您手动自行转账给对方，对方才能收到款项</view>
			<view class="block" v-if="type == '1' || type == 'set1'">
				<picker @change="bindPickerChange1" :value="index1" :range="payList">
					<view class="a_input one">
						<view class="s_input">
							<text>展示设置</text>
							<view>{{ payList[index1] }}</view>
						</view>
						<uni-icons style="margin-right: -11rpx;" type="arrowright" :color="'#C5CFD5'" size="22"></uni-icons>
					</view>
				</picker>
				<view class="s_line"></view>
				<picker @change="bindPickerChange2" :value="index2" :range="coinList">
					<view class="a_input  two">
						<view class="s_input">
							<text>所属币种</text>
							<view>{{ coinList[index2] }}</view>
						</view>
						<uni-icons style="margin-right: -11rpx;" type="arrowright" :color="'#C5CFD5'" size="22"></uni-icons>
					</view>
				</picker>
				<view class="a_input  two">
					<text>真实姓名</text>
					<input class="uni-input" type="text" value="" placeholder-class="uni-place" placeholder="请输入真实姓名" />
				</view>
				<view class="a_input  two">
					<text>银行卡号</text>
					<input class="uni-input" type="text" value="" placeholder-class="uni-place" placeholder="请输入银行卡号" />
				</view>
				<view class="a_input  two">
					<text>开户银行</text>
					<input class="uni-input" type="text" value="" placeholder-class="uni-place" placeholder="请输入开户银行" />
				</view>
				<view class="a_input one">
					<text>开户支行</text>
					<input class="uni-input" type="text" value="" placeholder-class="uni-place" placeholder="可选填" />
				</view>
				<view class="s_line"></view>
				<view class="a_input two">
					<text>短信验证</text>
					<input class="uni-input" type="tel" value="" placeholder-class="uni-place" placeholder="请输入短信验证码" />
					<view v-if="numTime == false" class="send" @click="getCode()"><button plain>发送验证码</button></view>
					<view v-else class="send">
						<button plain disabled>{{ numText }}</button>
					</view>
				</view>
			</view>
			<view class="block" v-if="type != '1' && type != 'set1'">
				<picker @change="bindPickerChange1" :value="index1" :range="payList">
					<view class="a_input one">
						<view class="s_input">
							<text>展示设置</text>
							<view>{{ payList[index1] }}</view>
						</view>
						<uni-icons style="margin-right: -11rpx;" type="arrowright" :color="'#C5CFD5'" size="22"></uni-icons>
					</view>
				</picker>
				<view class="s_line"></view>
				<picker @change="bindPickerChange2" :value="index2" :range="coinList">
					<view class="a_input two">
						<view class="s_input">
							<text>所属币种</text>
							<view>{{ coinList[index2] }}</view>
						</view>
						<uni-icons style="margin-right: -11rpx;" type="arrowright" :color="'#C5CFD5'" size="22"></uni-icons>
					</view>
				</picker>
				<view class="a_input two">
					<text>真实姓名</text>
					<input class="uni-input" type="text" value="" placeholder-class="uni-place" placeholder="请输入真实姓名" />
				</view>
				<view class="a_input" :class="type == '2' || type == '3' ? 'two' : ''">
					<text v-if="type == '2' || type == 'set2'">支付宝账号</text>
					<text v-if="type == '3' || type == 'set3'">微信账号</text>
					<input class="uni-input" type="text" value="" placeholder-class="uni-place" placeholder="请输入银行卡号" />
				</view>
				<view class="a_input" v-if="type == '1' || type == '2'">
					<text>短信验证</text>
					<input class="uni-input" type="tel" value="" placeholder-class="uni-place" placeholder="请输入短信验证码" />
					<view v-if="numTime == false" class="send" @click="getCode()"><button plain>发送验证码</button></view>
					<view v-else class="send">
						<button plain disabled>{{ numText }}</button>
					</view>
				</view>
				<view class="s_line"></view>
				<view class="l_input" style="justify-content: normal;">
					<view v-if="type == '2' || type == 'set2'" class="label">支付宝收款码</view>
					<view v-if="type == '3' || type == 'set3'" class="label">微信收款码</view>
					<view class="upload" @click="upload('IMG_URL', 'IMG')">
						<block v-if="IMG"><image class="s_img upimg" :src="IMG_URL" mode="aspectFit"></image></block>
						<image class="s_img" src="../../../static/c2c/up.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="blue_btn" v-if="type == '1' || type == '2' || type == '3'">确认</view>
			<view class="blue_btn" @click="isBind = true" v-else>解绑</view>
		</view>
		<!-- 是否解绑 -->
		<Modal :title="'解除绑定'" v-if="isBind" @close="closeModal('isBind')">
			<view class="common_model">
				<view class="model_text">是否解绑当前收款方式？</view>
				<view class="common_btn">
					<view @click="closeModal('isBind')">取消</view>
					<view class="active" @click="bind()">确认解绑</view>
				</view>
			</view>
		</Modal>
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages"></HMmessages>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import { uniPopup } from '@dcloudio/uni-ui';
import HMmessages from '@/components/HM-messages/HM-messages.vue';
import Modal from '@/components/lkex-modal/index.vue';
export default {
	components: { uniIcons, uniPopup, HMmessages, Modal },
	data() {
		return {
			showList: false,
			title: '选择银行',
			coinList: ['CNY'],
			payList: ['用于付款', '用于收款', '用于收付款'],
			index: 99,
			index1: 0,
			index2: 0,
			type: '',
			IMG: '',
			IMG_URL: '',
			numTime: false,
			numText: '60秒',
			num: 60,
			isBind: false
		};
	},
	computed: {},
	onLoad(option) {
		if (option && option.type) {
			this.type = option.type;
			if (option.type == '1') {
				uni.setNavigationBarTitle({
					title: '绑定银行卡'
				});
			}
			if (option.type == '2') {
				uni.setNavigationBarTitle({
					title: '绑定支付宝'
				});
			}
			if (option.type == '3') {
				uni.setNavigationBarTitle({
					title: '绑定微信'
				});
			}
			if (option.type == 'set1') {
				uni.setNavigationBarTitle({
					title: '设置银行卡'
				});
			}
			if (option.type == 'set2') {
				uni.setNavigationBarTitle({
					title: '设置支付宝'
				});
			}
			if (option.type == 'set3') {
				uni.setNavigationBarTitle({
					title: '设置微信'
				});
			}
		}
	},
	onShow() {},
	methods: {
		hidePopup() {
			this.showList = false;
		},
		showAccount() {
			this.showList = true;
		},
		bindPickerChange1: function(e) {
			this.index1 = e.target.value;
		},
		bindPickerChange2: function(e) {
			this.index2 = e.target.value;
		},
		//错误提示
		errors(text) {
			this.HMmessages.show(text, {
				textAlign: 'center',
				background: '#74272d',
				fontColor: '#fff'
			});
		},
		//隐藏弹窗
		closeModal(name) {
			this[name] = false;
		},
		//获取验证码倒计时
		times() {
			let that = this;
			clearInterval(this.timeInt);
			this.timeInt = setInterval(() => {
				that.num--;
				if (that.num == 0) {
					clearInterval(that.time);
					that.numTime = false;
					that.num = 60;
					that.numText = that.num + '秒';
				} else {
					that.numText = that.num + '秒';
					that.times();
				}
			}, 1000);
		},
		//获取验证码
		getCode() {
			let type = '';
			if (REG_EMAIL.test(this.USERINFO.account)) {
				type = 'EMAIL';
			} else {
				type = 'PHONE';
			}
			this.$api.showLoading();
			comSvc
				.getCode({
					sendType: type,
					sendAccount: this.USERINFO.account
				})
				.then(({ data }) => {
					this.$api.hideLoading();
					if (data.code == '100200') {
						this.numTime = true;
						this.times();
						this.HMmessages.show('验证码已发送', {
							textAlign: 'center',
							background: '#356e36',
							fontColor: '#fff'
						});
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						});
					}
				});
		},

		//上传图片
		upload(name, imgName) {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				success: function(res) {
					if (res.tempFiles[0].size * 1 > 2097152) {
						that.errors('图片大小超过2MB，请重新选择');
						return false;
					}
					uni.showLoading({
						title: '上传中...',
						mask: true
					});
					uni.uploadFile({
						url: that.$api.baseUrl + '/exchangeApi/common/upload-photo/private', //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							'Content-Type': 'image/jpeg;'
						},
						header: {
							authorization: 'token=' + uni.getStorageSync('TOKEN'),
							'accept-language': 'zh-CN'
						},
						success: data => {
							uni.hideLoading();
							let resData = JSON.parse(data.data);
							if (resData.code == '100200') {
								that[name] = res.tempFilePaths[0];
								that[imgName] = resData.data.name;
								console.log(res.tempFilePaths[0]);
							} else {
								that.errors(resData.msg);
							}
						},
						fail: err => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '网络异常，请稍后重试',
								position: 'bottom'
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
@import './style.scss';
</style>
